<template>
  <div class="bgcbox">
    <div class="logincss">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <h2>登录页面</h2>
        </div>
        <div class="text item">
          <el-form
            :model="user"
            :rules="rules"
            ref="loginForm"
            label-width="100px"
            class="demo-loginForm"
          >
            <el-form-item label="用户名" prop="name">
              <el-input
                v-model="user.name"
                suffix-icon="el-icon-edit"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password" required>
              <el-input
                type="password"
                v-model="user.password"
                show-password
              ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass" required>
              <el-input
                type="password"
                v-model="user.checkPass"
                show-password
              ></el-input>
            </el-form-item>
            <!-- 验证码 -->
            <el-form-item label="验证码" v-if="num >= 3">
              <el-input v-model="user.Code" style="width: 60%"></el-input>
              <span v-html="codeUrl" @click="getCode"></span>
            </el-form-item>

            <!-- 记住密码 -->
            <el-form-item>
              <el-checkbox v-model="user.remember">记住密码</el-checkbox>
            </el-form-item>

            <el-form-item>
              <div>{{ message }}</div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm">登录</el-button>
               <el-button><router-link  :to="'/register'" >注册</router-link></el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { requestMyList, RequestVerifyCode, RequestCheckCode } from "@/api/My";
import Sha256 from 'js-sha256'
export default {
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.user.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.user.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      user: {
        name: "",
        password: "",
        checkPass: "",
        Code: "",
        remember: true,
      },
      codeUrl: "",
      message: "",
      num: 0,
      rules: {
        name: [
          // required 是否为必填项
          // message 当前规则校验失败时的提示
          // trigger 表单验证的触发实际，blur表示失去焦点时触发
          { required: true, message: "用户名为必填项", trigger: "blur" },
          // min 最小长度
          // max 最大长度
          {
            min: 2,
            max: 8,
            message: "用户名长度在 2 到 6 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: validatePass, message: "密码为必填项", trigger: "blur" },
          {
            min: 3,
            max: 8,
            message: "密码长度在 3 到 6 个字符",
            trigger: "blur",
          },
        ],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
      },
    };
  },

  created() {
    this.getCode();
    let user = this.$store.getters.user;
    if (user) {
      this.user.name = user.username;
      this.user.password = user.password;
      this.user.checkPass = user.password;
    }

    
   
  
  },
  methods: {
    submitForm() {
      this.$refs.loginForm.validate((valide) => {
        if (valide) {
          //效验验证码
          if (this.num >= 3) {
            RequestCheckCode(this.user.Code).then((data) => {
              if (data.resultCode !== 1) {
                // this.$message('验证码不正确!')
                this.message = "验证码不正确!";
              }

              this.message = ""; // 重置提示信息
              //登录接口
              this.getLogin();
            });
          } else {
            //登录接口
            this.getLogin();
          }
        }
      });
    },
    // 重置密码框
    resetForm() {
      
      this.$refs.loginForm.resetFields();
    },
    // 验证码接口
    getCode() {
      RequestVerifyCode().then((data) => {
        this.codeUrl = data;
      });
    },
    /**
     * 登录业务接口
     */
    getLogin() {
      requestMyList(this.user.name, Sha256(this.user.password)).then((data) => {
        let { resultCode, resultInfo } = data;
        let token = data.token;
        if (resultCode === 1) {
          let userinfo=resultInfo
          console.log('UserInfo',userinfo);
          this.$store.dispatch('userList',userinfo)
            this.$store.dispatch("saveToken", token);
         
          if (this.user.remember) {
            let user = {
              username: resultInfo.username,
              password: resultInfo.password,
              headerimg: resultInfo.headerimg,
              roleId: resultInfo.role_id
            };
            console.log(user);
            this.$store.dispatch("saveToken", token);
            this.$store.dispatch("initUser", user); //保存用户信息
          } else {
            this.$store.dispatch("deleUser"); // 清除用户信息
          }
          //传入用户权限
          	let roleId = resultInfo.role_id
					this.$store.dispatch('saveMenu', roleId)
          // 获取操作资源并保存
					this.$store.dispatch('saveResource',roleId)
        
          this.$router.push("/Layout");
        } else {
          this.num = this.num + 1;
          this.$message("用户名密码出错!");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
a{
  text-decoration: none;
   color: #000;
}
.bgcbox {
  background-color: #2c414c;
  width: 100%;
  height: 100%;
}
.logincss {
  /* width: 460px;
  height: 350px; */
  /* text-align: center; */
  border-radius: 25px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
}
/* .demo-loginForm {
  width: 400px;
  height: 100%;
  padding-top: 100px;
} */

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}

.clearfix h2{
text-align: center;
font-size: 22px;
}
</style>
